<template>
	<view class="page-cont" :style="themeStore.theme">
		<navbar title="修改密码"></navbar>
		<view class="main-cont" :style="{height: pageHeight}">
			<view class="form-box">
				<uni-forms ref="pwForm" :value="formData" :rules="rules" labelPosition="top" labelWidth="200">
					<uni-forms-item label="注册手机号" name="telephone" required>
						<uni-easyinput v-model="formData.telephone" type="number" maxlength="11" clearable placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="code" required>
						<uni-easyinput v-model="formData.code" maxlength="4" clearable placeholder="请输入账号" />
						<view class="code" @click="handleCode">{{count == 60 ? '获取验证码' : count + 's'}}</view>
					</uni-forms-item>
					<uni-forms-item label="新密码" name="password" required>
						<uni-easyinput v-model="formData.password" type="password" clearable placeholder="请输入新密码" />
					</uni-forms-item>
					<uni-forms-item label="确认密码" name="refpassword" required>
						<uni-easyinput v-model="formData.refpassword" type="password" clearable placeholder="请输入确认密码" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="form-btn" @click="handleSubmit">确定</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, watch } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import { storeToRefs } from 'pinia';
	import useThemeStore from '@/store/theme';
	import useUserStore from '@/store/user';
	import { getCode, resetPw } from "@/api/login.js";
	import { getAck } from '@/utils/tools.js'
	const themeStore = useThemeStore();
	const userStore = useUserStore();
	const { pageHeight } = useNavbar();
	const { themeList } = storeToRefs(themeStore);
	const { userInfo } = storeToRefs(userStore);
	const pwForm = ref(null)
	const timer = ref(null)
	const count = ref(60)
	const formData = reactive({
		telephone: '',
		code: '',
		password: '',
		refpassword: '',
	});
	const rules = reactive({
		telephone: {
			rules: [{
				required: true,
				errorMessage: "请输入手机号",
			},],
		},
		code: {
			rules: [{
				required: true,
				errorMessage: "请输入验证码",
			},],
		},
		password: {
			rules: [{
				required: true,
				errorMessage: "请输入新密码",
			},],
		},
		refpassword: {
			rules: [{
				required: true,
				errorMessage: "请输入确认密码",
			},],
		},
	})

	watch(() => count.value, (val) => {
		if (val == 0) {
			clearInterval(timer.value);
			count.value = 60;
		}
	});

	// 获取验证码
	function getMobileCode() {
		let params = {
			ack: getAck(formData.telephone),
			telephone: formData.telephone,
		}
		getCode(params).then(res => {

		});
	}

	// 发送验证码
	function handleCode() {
		if (!checkPhone()) {
			return;
		}
		getMobileCode();
		count.value = 60;
		timer.value = setInterval(() => {
			count.value--;
		}, 1000)
	}

	// 确认
	function handleSubmit() {
		pwForm.value.validate().then((valid = false) => {
			if (valid && checkPhone() && checkCode() && checkPw()) {
				let params = {
					ack: getAck(formData.telephone),
					telephone: formData.telephone,
					code: formData.code,
					password: formData.password,
				}
				resetPw(params).then(() => {
					uni.showToast({
						title: '密码重置成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 500);
				});
			}
		});
	}

	// 校验手机号码
	function checkPhone() {
		const reg = /^1\d{10}$/;
		if (!formData.telephone.length) {
			uni.showToast({
				title: '手机号码不能为空',
				icon: 'none'
			});
			return false;
		}
		if (!reg.test(formData.telephone)) {
			uni.showToast({
				title: '手机号码格式不正确',
				icon: 'none'
			});
			return false;
		}
		return true;
	}

	function checkCode() {
		if (!formData.code.length) {
			uni.showToast({
				title: '验证码不能为空',
				icon: 'none'
			});
			return false;
		}
		if (formData.code.length != 4) {
			uni.showToast({
				title: '验证码格式不正确',
				icon: 'none'
			});
			return false;
		}
		return true;
	}

	function checkPw() {
		if (!formData.password.length) {
			uni.showToast({
				title: '新密码不能为空',
				icon: 'none'
			});
			return false;
		}
		if (formData.password.length < 4 || formData.refpassword.length < 4) {
			uni.showToast({
				title: '新密码长度不能小于4~',
				icon: 'none'
			});
			return false;
		}
		if (formData.password != formData.refpassword) {
			uni.showToast({
				title: '新密码长度不能小于4~',
				icon: 'none'
			});
			return false;
		}
		return true;
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			padding: 10px;
			background: linear-gradient(135deg, rgba(229, 233, 246, 1) 0%, rgba(229, 240, 248, 1) 26.08%, rgba(230, 236, 249, 1) 72.48%, rgba(243, 249, 250, 1) 100%);
			overflow: hidden;
			overflow-y: auto;
		}

		.form-box {
			padding: 20px;
			border-radius: 10px;
			background-color: #fff;
		}

		.form-btn {
			margin-top: 30px;
			height: 40px;
			line-height: 40px;
			color: #fff;
			text-align: center;
			border-radius: 10px;
			background-color: $theme-color;
		}
	}

	::v-deep .uni-forms-item {
		margin-bottom: 10px;
	}

	::v-deep .uni-forms-item__content {
		display: flex;
	}

	.code {
		width: 100px;
		color: $theme-color;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		line-height: 35px;
	}
</style>